<template>
    <div class="onetasklist">
        <div style="display:flex;flex-direction: row;align-items: center; height: 36px;">
            <div style="width:30px"></div>
            <div class="headicon" style="display:block;" :style="{'-webkit-mask-image':'url('+img+')','mask-image':'url('+img+')'}"></div>
            <div style="width:10px"></div>
            <div class="headtext">{{ title }}</div>
        </div>
        <slot></slot>
        <div style="height: 10px;"></div>
        <div v-if="showdivider" style="width:calc(100% - 42px);height: 2px; background-color: #ffffff20;  margin-left: 27px;"></div>
        <div v-else style="width:calc(100% - 42px);height: 2px;  margin-left: 27px;"></div>
        <div style="height: 5px;"></div>
    </div>
</template>
<script>
    export default {
        name: "TaskListEntry",
        components: {},
        props: ["img","title","showdivider"],
        data() {
            return {

            };
        },
        methods: {
            
        },
        mounted() {

        },
        watch: {

        }
    };
</script>

<style scoped>
.onetasklist{
    width:100%;
    display: flex;
    flex-direction: column;
}

.headicon{
    width: 24px;
    height: 24px;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    background-color: rgb(237, 229, 218);
}
.headtext{
    color:rgb(237, 229, 218);
    font-weight: 400;
    font-size: 19px;
    padding-bottom: 3px;
    
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.204);;
}
</style>